<script setup>
import { ref, reactive, onMounted } from "vue";
import {
    getTaskListService,
    addTaskService,
    deleteTaskService,
    getTaskTypeAndStatusService,
    updateTaskService,
    searchTaskService
} from "@/api/taskAPI";

import { getIterationListService } from "@/api/iterationAPI";
import { getUserListService } from "@/api/userAPI";
import { Delete, Edit } from "@element-plus/icons-vue";

// 校验新增必填项
const formRef = ref(null);

// 定义弹窗显示
const dialogFormVisible = ref(false);

//定义列表数据
const taskList = ref([]);

// 定义查询数据
const condations = ref({
    username: "",
    taskTitle: "",
    status: "",
    type: ""
});

const getTaskList = async () => {
    let res = await getTaskListService();
    taskList.value = res.data;
};

// 查询操作
const submit = async function () {
    let res = await searchTaskService(condations.value);
    taskList.value = res.data;
};

//重置操作
const reset = function () {
    condations.value = {
        username: "",
        taskTitle: "",
        status: "",
        type: ""
    };
    getTaskList();
};

// 删除操作
const deleteTask = function (taskId) {
    ElMessageBox.confirm("请确认是否要删除?", "提示：", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            console.log(taskId);
            deleteTaskService({ id: taskId });
            setTimeout(() => {
                getTaskList({});
            }, 300);

            ElMessage({
                type: "success",
                message: "确认删除",
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};

const addOrEidt = ref({
    tag: false,
    title: "",
});

// 弹窗数据
const form = reactive({
    title: "",
    description: "",
    iterationId: "",
    iterationName: "",
    executeUserId: "",
    executeUserName: "",
    type: "",
    status: ""
});

// 添加操作
const add = () => {
    form.id = ""
    form.title = "";
    form.description = "";
    form.iterationId = "";
    form.iterationName = "";
    form.executeUserId = "";
    form.executeUserName = "";
    form.type = "";
    form.status = "";
    dialogFormVisible.value = true;
    addOrEidt.value.title = "添加任务";
    addOrEidt.value.tag = true;
};

// 获取迭代列表
const iterationList = ref([]);
getIterationListService().then((res) => {
    iterationList.value = res.data;
});

// 获取用户列表
const userList = ref([]);
getUserListService().then((res) => {
    userList.value = res.data;
});

// 获取任务类型，状态
const taskTypeAndStatus = ref([]);
getTaskTypeAndStatusService().then((res) => {
    taskTypeAndStatus.value = res.data;
});


// 新增操作
const addTask = async function () {
    iterationList.value.forEach((item) => {
        if (item.name == form.iterationName) {
            form.iterationId = item.id;
        }
    });
    userList.value.forEach((item) => {
        if (item.username == form.executeUserName) {
            form.executeUserId = item.id;
        }
    });

    if (addOrEidt.value.tag) {
        await addTaskService(form);
    } else {
        await updateTaskService(form);
    }

    dialogFormVisible.value = false;
    setTimeout(() => {
        getTaskList();
    }, 500);
};

// 修改操作
const updateTask = function (value) {
    addOrEidt.value.title = "编辑任务";
    dialogFormVisible.value = true;
    form.id = value.id;
    form.title = value.title;
    form.description = value.description;
    form.iterationId = value.iterationId;
    form.iterationName = value.iterationName;
    form.executeUserId = value.executeUserId;
    form.executeUserName = value.executeUser[0];
    form.type = value.type;
    form.status = value.status;
    addOrEidt.value.tag = false;
};

onMounted(() => {
    getTaskList();
});
</script>
<template>
    <div class="task-view">
        <div>
            <el-form :inline="true" :model="condations" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="condations.taskTitle" placeholder="任务名称" clearable />
                    <el-input v-model="condations.username" placeholder="创建人" clearable />
                    <el-input v-model="condations.status" placeholder="任务状态" clearable />
                    <el-input v-model="condations.type" placeholder="任务类型" clearable />
                    <el-button type="primary" @click="submit">查询</el-button>
                    <el-button @click="reset" type="info" round>重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="add" type="primary" round><el-icon>
                            <CirclePlus />
                        </el-icon>新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-container">
            <el-table :data="taskList" border style="width: 100%">
                <el-table-column prop="id" label="ID" width="70" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="description" label="描述" />
                <el-table-column prop="createUser" label="创建人" />
                <el-table-column prop="type" label="任务类型" />
                <el-table-column prop="status" label="状态" />
                <el-table-column prop="iterationName" label="关联迭代" />
                <el-table-column prop="executeUser" label="执行人" />
                <el-table-column prop="createTime" label="创建时间">
                    <template v-slot="scope">
                        {{ formatDate(scope.row.createTime, "YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="更新时间">
                    <template v-slot="scope">
                        {{ formatDate(scope.row.updateTime, "YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="120">
                    <template v-slot="scope">
                        <el-button @click="updateTask(scope.row)" type="primary" :icon="Edit" circle />
                        <el-button @click.prevent="deleteTask(scope.row.id)" type="danger" :icon="Delete" circle />
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog v-model="dialogFormVisible" :title="addOrEidt.title" width="500">
            <el-form :model="form" ref="formRef">
                <el-form-item label="任务标题:" :rules="[
                    { required: true, message: '请输任务标题！', trigger: 'blur' },
                ]">
                    <el-input v-model="form.title" autocomplete="off" placeholder="任务标题" />
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input v-model="form.description" autocomplete="off" placeholder="任务描述" />
                </el-form-item>
                <el-form-item label="关联迭代:" :rules="[
                    { required: true, message: '请选择关联迭代！', trigger: 'blur' },
                ]">
                    <el-select v-model="form.iterationName" placeholder="请选择迭代">
                        <el-option v-for="item in iterationList" :key="item.id" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="执行人:" :rules="[
                    { required: true, message: '请选择执行人！', trigger: 'blur' },
                ]">
                    <el-select v-model="form.executeUserName" placeholder="请选择执行人">
                        <el-option v-for="item in userList" :key="item.id" :label="item.username"
                            :value="item.username" />
                    </el-select>
                </el-form-item>
                <el-form-item label="任务类型:" :rules="[
                    { required: true, message: '请选任务类型！', trigger: 'blur' },
                ]">
                    <el-select v-model="form.type" placeholder="任务类型">
                        <el-option v-for="item, index in taskTypeAndStatus.taskType" :key="index" :label="item"
                            :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="任务状态:" :rules="[
                    { required: true, message: '请选任务状态！', trigger: 'blur' },
                ]">
                    <el-select v-model="form.status" placeholder="任务状态">
                        <el-option v-for="item, index in taskTypeAndStatus.taskStatus" :key="index" :label="item"
                            :value="item" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addTask"> 提交 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.project-view {
    width: 100%;
    margin-right: 30px;
}

.demo-form-inline .el-input {
    --el-input-width: 200px;
}

.table-container {
    width: 100%;
}
</style>
